<HTML>
 <HEAD>
  <TITLE>在Extjs组件中使用模板</TITLE>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <style type="text/css">
	.even { background-color: #CCFFFF; }
	.odd { background-color: #FFFFFF; }
  </style>
  <link rel="stylesheet" type="text/css" href="../../ext-4.0/resources/css/ext-all.css" />
  <script type="text/javascript" src="../../ext-4.0/bootstrap.js"></script>
  <script type="text/javascript" src="../../ext-4.0/locale/ext-lang-zh_CN.js"></script>
  <script type="text/javascript">
	Ext.onReady(function(){
		//定义组合框模板
		var itemTpl = new Ext.XTemplate(
			'<div class="x-combo-list-item {[xindex % 2 == 0 ? "even" : "odd"]}">',
			'{#} ：{[this.check(values)]}</div>',
			{
				check : function (values) {
					if(values.value > 2 ){
						return "<font color=red>"+values.item+"</font>";
					}else {
						return "<font color=blue>"+values.item+"</font>";
					}
				}
			}
		);
		//创建数据模型
		Ext.regModel('ItemInfo', {
		    fields: ['item','value']
		});
		
		new Ext.form.Panel({
			title:'在Extjs组件中使用模板',
			renderTo: Ext.getBody(),
			bodyPadding: 5,
			height : 100,
			frame : true,
			width : 350,
			items : [{
				xtype : 'combo',
				fieldLabel:'邮政编码',
				displayField:'item',
				valueField:'value',
				labelSeparator :'：',//分隔符
				listConfig : {
					itemTpl : itemTpl
				},
				editable : false,
				queryMode: 'local',
				triggerAction: 'all',
				store : new Ext.data.Store({
					model : 'ItemInfo',
					fields: ['item','value'],
					data : [{item:'条目1',value:1},
					        {item:'条目2',value:2},
					        {item:'条目3',value:3},
					        {item:'条目4',value:4},
					        {item:'条目5',value:5},
					        {item:'条目6',value:6}]
				})
			}]
		});
	});
  </script>
 </HEAD>
 <BODY STYLE="margin: 10px"></BODY>
</HTML>
